<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>
<body>
<div id="app">
<!--   只有在组件使用的时候才会被VueComponent实例化成组件对象-->
    <Student></Student>
    <Teacher></Teacher>
</div>
<script>

    Vue.config.productionTip = false
    const Student = {
        template:`
            <div>
                <h2>我是Student组件</h2>
                <button>Student按钮</button>
            </div>
        `
    }

    const Teacher = Vue.extend({
        template:`
            <div>
                <h2>我是Teacher组件</h2>
                <button>Teacher按钮</button>
                <button @click="show">show</button>
            </div>
        `,
        methods:{
            show(){
                console.log(this,'this--Teacher')//VueComponent构造函数
                console.log(this.__proto__,'this.__proto__')//VueComponent.__proto__===>Vue构造函数
                //this.__proto__.__proto__===VueComponent.__proto__.__proto__===Vue.prototype
                console.log(this.__proto__.__proto__===Vue.prototype,'this.__proto__.__proto__')//VueComponent.__proto__.__proto__===>Vue.prototype
                console.log(this.__proto__.__proto__.__proto__,'this.__proto__.__proto__.__proto__')//Object.prototype
                console.log(this.__proto__.__proto__.__proto__.__proto__,'this.__proto__.__proto__.__proto__.__proto__')//null

            //    总结：通过以上推论可知，VueComponent构造函数继承于Vue构造函数
            //    因此，每次创建子组件时，就相当于实例化了Vue构造函数，
                //    我们就可以在Vue的原型身上放置一些公共属性，使实例化的组件实例都可以通过原型链访问到
                console.log(this.a)//666
            //    组件实例的原型链关系
            //    组件实例===>VueComponent构造函数的原型对象===>Vue构造函数的原型对象===>Object构造函数的原型对象===>null
            }
        }
    })
    //Teacher组件，是一个VueComponent构造函数
    console.log(Teacher,'Teacher组件')
    const vm = new Vue({
        el: '#app',
        data() {
            return {}
        },
        components:{
            Student,
            Teacher
        }
    })
    Vue.prototype.a = 666
</script>
</body>
</html>